import {messages} from "share/common";
import React from 'react'
import menuRoute from 'routes/menuRoute'
import { connect } from 'react-redux'
import { Form, Steps, Icon, Button, Input, Divider, Radio, Row, Col, Spin, message } from 'antd';
const Step = Steps.Step;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;

import Chooser from 'components/chooser'
import SelectAddress from 'components/template/select-address-modal/select-address-modal'
import seniorService from 'containers/increment-service/senior-service-open/senior-service.service'
import 'styles/senior-service-open/apply-invoice.scss'

class ApplyInvoice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      addressLoading: false,
      btnLoading: false,
      selectAddressVisible: false,
      info: {},
      address: {},
      invoiceType: 'plain', //发票类型
      serviceTypeCode: "",
      openSetting: menuRoute.getRouteItem('open-setting'), //开通设置
    }
  }

  componentDidMount() {
    this.getInfo();
    this.getDefaultAddress()
  }

  getInfo = () => {
    this.setState({loading: true});
    seniorService.getOrderDetail(this.props.params.orderId).then(res => {
      this.setState({
        loading: false,
        info: res.data,
        serviceTypeCode: res.data.serviceTypeCode
      })
    }).catch(err => {
      this.setState({loading: false});
    })
  };

  //获取默认地址
  getDefaultAddress = () => {
    this.setState({ addressLoading: true });
    seniorService.getDefaultAddress().then(res => {
      this.setState({
        addressLoading: false,
        address: res.data
      })
    }).catch(err => {
      this.setState({ addressLoading: false });
    })
  };

  //选择收件地址
  handleSelectAddress = (value) => {
    this.setState({
      selectAddressVisible: false,
      address: value
    })
  };

  //申请开票
  handleApplyInvoice = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { address } = this.state;
        if (!address.billingContactOID) {
          message.error(messages('senior-service-open.key1')/*请选择收货地址*/)
        } else {
          values.orderId = this.props.params.orderId;
          values.receiver = address.fullName;
          values.mobile = address.phone;
          values.address = address.fullReceiverAddress;
          if (values.bankId && values.bankId[0]) {
            values.bankBranchName = values.bankId[0].bankBranchName;
            values.bankId = values.bankId[0].id;
          }
          this.setState({ btnLoading: true });
          seniorService.newInvoice(values).then(() => {
            this.setState({ btnLoading: false }, () => {
              this.toNextPage()
            })
          }).catch(err => {
            this.setState({ btnLoading: false });
          })
        }
      }
    })
  };

  //跳过
  toNextPage = () => {
    const { serviceTypeCode, openSetting } = this.state;
    this.context.router.push(openSetting.url.replace(":serviceCode", serviceTypeCode))
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, btnLoading, selectAddressVisible, info, addressLoading, address, invoiceType } = this.state;
    const formItemLayout = {
      labelCol: {span: 4},
      wrapperCol: {span: 10, offset: 1}
    };
    const formItemLayout1 = {
      labelCol: {span: 4},
      wrapperCol: {span: 17, offset: 1}
    };
    return (
      <div className="apply-invoice">
        <Steps current={3} size="small">
          <Step title={messages('senior-service-open.key2')/*选择服务*/} />
          <Step title={messages('senior-service-open.key3')/*确认订单*/} />
          <Step title={messages('senior-service-open.key4')/*付款*/} />
          <Step title={messages('senior-service-open.key5')/*申请开票*/} />
          <Step title={messages('senior-service-open.key6')/*开通设置*/} />
        </Steps>
        <Spin spinning={loading}>
          <Form className="invoice-form" onSubmit={this.handleApplyInvoice}>
            <FormItem {...formItemLayout} label={messages('senior-service-open.key7')/*订单编号*/} colon={false}>
              <div>{info.orderCode}</div>
            </FormItem>
            <FormItem {...formItemLayout} label={messages('senior-service-open.key8')/*实付金额*/} colon={false}>
              <div>{this.filterMoney(info.actualAmount  || 0)}元</div>
            </FormItem>
            <Divider/>
            <FormItem {...formItemLayout} label={messages('senior-service-open.key9')/*抬头类型*/} colon={false}>
              <div>企业</div>
            </FormItem>
            <FormItem {...formItemLayout} label={messages('common.invoice.type')/*发票类型*/} colon={false}>
              {getFieldDecorator('invoiceType', {
                initialValue: 'plain'
              })(
                <RadioGroup onChange={e => this.setState({ invoiceType: e.target.value })}>
                  <Radio value="plain">{messages('senior-service-open.key10')/*增值税普通发票*/}</Radio>
                  <Radio value="special">{messages('senior-service-open.key11')/*增值税专用发票*/}</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <Row>
              <Col span={14} offset={2} className="input-invoice-info">
                <FormItem {...formItemLayout1} label={messages('senior-service-open.key12')/*发票抬头*/} colon={false}>
                  {getFieldDecorator('title', {
                    rules: [{
                      required: true,
                      message: messages('common.please.input')/*请输入*/
                    }],
                  })(
                    <Input placeholder={messages('common.please.input')/*请输入*/}/>
                  )}
                </FormItem>
                <FormItem {...formItemLayout1} label={messages('senior-service-open.key13')/*企业税号*/} colon={false}>
                  {getFieldDecorator('taxNumber', {
                    rules: [{
                      required: true,
                      message: messages('common.please.input')/*请输入*/
                    }],
                  })(
                    <Input placeholder={messages('common.please.input')/*请输入*/}/>
                  )}
                </FormItem>
                {invoiceType === 'special' && (
                  <div>
                    <FormItem {...formItemLayout1} label={messages('senior-service-open.key14')/*银行账号*/} colon={false}>
                      {getFieldDecorator('bankAccount', {
                        rules: [{
                          required: true,
                          message: messages('common.please.input')/*请输入*/
                        }],
                      })(
                        <Input placeholder={messages('common.please.input')/*请输入*/}/>
                      )}
                    </FormItem>
                    <FormItem {...formItemLayout1} label={messages('senior-service-open.key15')/*开户行*/} colon={false}>
                      {getFieldDecorator('bankId', {
                        rules: [{
                          required: true,
                          message: messages('common.select')/*请选择*/
                        }],
                      })(
                        <Chooser single={true}
                                 type="select_bank"
                                 placeholder={messages('common.select')/*请选择*/}
                                 labelKey="bankBranchName"
                                 valueKey="bankCode"/>
                      )}
                    </FormItem>
                    <FormItem {...formItemLayout1} label={messages('senior-service-open.key16')/*电话*/} colon={false}>
                      {getFieldDecorator('enterpriseMobile', {
                        rules: [{
                          required: true,
                          message: messages('common.please.input')/*请输入*/
                        }],
                      })(
                        <Input placeholder={messages('common.please.input')/*请输入*/}/>
                      )}
                    </FormItem>
                    <FormItem {...formItemLayout1} label={messages('senior-service-open.key17')/*地址*/} colon={false}>
                      {getFieldDecorator('enterpriseAddress', {
                        rules: [{
                          required: true,
                          message: messages('common.please.input')/*请输入*/
                        }],
                      })(
                        <Input placeholder={messages('common.please.input')/*请输入*/}/>
                      )}
                    </FormItem>
                  </div>
                )}
              </Col>
            </Row>
            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">{messages('senior-service-open.key18')/*收件信息*/}</span>} colon={false}>
              {getFieldDecorator('receiver')(
                addressLoading ? (
                  <Icon type="loading" />
                ) : (
                  <div>
                    {address.billingContactOID ? (
                      <div>
                        <div><a onClick={() => this.setState({selectAddressVisible: true})}>{messages('senior-service-open.key19')/*更改收件地址*/}</a></div>
                        <div>{address.fullName} {address.phone}</div>
                        <div>{address.fullReceiverAddress}</div>
                      </div>
                    ) : (
                      <a onClick={() => this.setState({selectAddressVisible: true})}><Icon type="plus" />{messages('senior-service-open.key20')/*添加收件地址*/}</a>
                    )}
                  </div>
                )
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/} colon={false}>
              {getFieldDecorator('remark', {
              })(
                <TextArea placeholder={messages('common.please.input')/*请输入*/} style={{resize: 'none'}}/>
              )}
            </FormItem>
            <Row>
              <Col span={15} className="buttons">
                <Button className="next" onClick={this.toNextPage}>{messages('senior-service-open.key22')/*跳过*/}</Button>
                <Button type="primary" htmlType="submit" loading={btnLoading}>{messages('senior-service-open.key23')/*提交申请*/}</Button>
              </Col>
            </Row>
          </Form>
        </Spin>
        <SelectAddress visible={selectAddressVisible}
                       selectedOID={address.billingContactOID}
                       onCancel={() => this.setState({selectAddressVisible: false})}
                       onOk={this.handleSelectAddress}
        />
      </div>
    )
  }
}

ApplyInvoice.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
  }
}

const wrapperApplyInvoice = Form.create()(ApplyInvoice);

export default connect(mapStateToProps)(wrapperApplyInvoice)
